<!DOCTYPE html >
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            /*让背景图片拉伸且占据整个屏幕*/
            background-image: url("loginui/login.png");
            background-size: cover;
            background-repeat: no-repeat;
        }

        #login-frame {
            /*让一个div块在整个屏幕居中*/
            width: 400px;
            height: 360px;
            padding: 13px;
            position: absolute;
            left: 50%;
            top: 50%;
            /*其中的margin-left和margin-top最好是设为width和height的一半值，
            那样是完全居中的效果，当然记得前面要加个负号*/
            margin-left: -200px;
            margin-top: -200px;
            /*设置背景颜色且加透明效果*/
            background-color: rgba(240, 255, 255, 0.5);
            /*设置圆角*/
            border-radius: 10px;
            text-align: center;
        }
        /*让输入框和label对齐居中*/
        form p > * {
            display: inline-block;
            vertical-align: middle;
        }

        #image-logo {
            margin-top: 22px;
        }

        .label-input {
            font-size: 14px;
            font-family: 宋体;

            width: 65px;
            height: 28px;
            line-height: 28px;
            text-align: center;

            color: white;
            background-color: rgba(108, 8, 10, 0.8);
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }

        .text-field {
            width: 278px;
            height: 28px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            border: 0;
        }

        #btn-login {
            font-size: 14px;
            font-family: 宋体;
            /*给一个label或者button里面的文字设置居中*/
            width: 120px;
            height: 28px;
            line-height: 28px;
            text-align: center;

            color: white;
            background-color: rgba(108, 8, 10, 0.8);
            border-radius: 6px;
            border: 0;

            float: left;
        }

        #forget-pwd {
            font-size: 12px;
            color: black;
            /*去除链接的下划线*/
            text-decoration: none;
            position: relative;
            float: right;
            top: 5px;

        }

        #forget-pwd:hover {
            color: white;
            text-decoration: underline;
        }

        #login-control {
            padding: 0 28px;
        }
    </style>
</head>
<body>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    click=function(para){
        para.focus();
        para.blur();
    }
    $(document).ready(function () {
        let user=document.getElementById("username");
        let password=document.getElementById("password");
        let confirm=document.getElementById("confirm");
        let people=document.getElementById("people");
        //用户名验证
        user.onblur=function () {
            if(user.value) {
                if(user.validity.patternMismatch){
                    user.setCustomValidity("用户名只能是英文或数字，长度6到10位");
                }
                else
                    user.setCustomValidity("");
            }
            else
                user.setCustomValidity("用户名不能为空");
        }
        //密码验证
        password.onblur=function () {
            if(password.value) {
                if(password.validity.patternMismatch){
                    password.setCustomValidity("密码为任意字符，长度6到12位");
                }
                else
                    password.setCustomValidity("");
            }
            else
                password.setCustomValidity("密码不能为空");
        }
        //密码确认
        confirm.onblur=function () {
            if(confirm.value) {
                if(!(confirm.value===password.value)){
                    confirm.setCustomValidity("请检查两次密码是否一致或密码格式有误");
                }
                else
                    confirm.setCustomValidity("");
            }
            else
                confirm.setCustomValidity("密码不能为空");
        }
        //选择人员
        people.onblur=function () {
            if ($("select>option:selected").val()==="===========请选择==========="){
                $("#people").css("border-color","red");
                people.setCustomValidity("请选择用户");}
            else{
                $("#people").css("border-color","black");
                people.setCustomValidity("");
            }
        }
        //注册
        $("#btn-login").click(function () {
            click(user);
            click(password);
            click(confirm);
            click(people);
        })
    })
</script>
<div id="login-frame">
    <p id="image-logo"><img src="loginui/camera.png" style="width: 50px;height: 50px;"></p>
    <form id="login-form" action="/user/register">
        <p><label class="label-input">用户类型</label>
            <select name="user" class="text-field" id="people">
                <option selected >===========请选择===========</option>
                <option value="public" >普通用户</option>
                <option value="super" >超级管理者</option>
            </select>
        </p>
        <p><label class="label-input">用户名</label><input type="text" id="username" name="username" class="text-field" maxlength="20" pattern="^[A-Za-z0-9]{6,10}$"/></p>
        <p><label class="label-input">密码</label><input type="password" id="password" name="password" class="text-field" maxlength="10" pattern="^.{6,12}$"/></p>
        <p><label class="label-input">确认密码</label><input type="password" id="confirm" name="password" class="text-field" maxlength="10" pattern="^.{6,12}$"/></p>
        <div id="login-control">
            <input type="submit" id="btn-login" value="注册" />
            <a id="forget-pwd" href="newlogin.html">返回登录</a>
        </div>
    </form>
</div>
</body>
</html>
